<template>
  <div class="expense-settlement">
    <div class="header">
      <router-link to="/main/wuye/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>费用结算</h2>
    </div>

    <div class="content">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="待结算" name="pending">
          <el-table :data="pendingList" style="width: 100%">
            <el-table-column prop="repairNo" label="报修编号" width="180"></el-table-column>
            <el-table-column prop="applicant" label="报修人" width="120"></el-table-column>
            <el-table-column prop="repairType" label="报修类型" width="120"></el-table-column>
            <el-table-column prop="repairCategory" label="维修类别" width="120"></el-table-column>
            <el-table-column prop="estimatedCost" label="预估费用" width="120">
              <template slot-scope="scope">
                {{ scope.row.estimatedCost }}元
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
                <el-button size="mini" type="primary" @click="handleSettlement(scope.row)">结算</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="已结算" name="completed">
          <el-table :data="completedList" style="width: 100%">
            <el-table-column prop="repairNo" label="报修编号" width="180"></el-table-column>
            <el-table-column prop="applicant" label="报修人" width="120"></el-table-column>
            <el-table-column prop="settlementNo" label="结算单号" width="180"></el-table-column>
            <el-table-column prop="actualCost" label="实际费用" width="120">
              <template slot-scope="scope">
                {{ scope.row.actualCost }}元
              </template>
            </el-table-column>
            <el-table-column prop="settlementTime" label="结算时间" width="180"></el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 详情对话框 -->
    <el-dialog title="维修详情" :visible.sync="detailDialogVisible" width="60%">
      <div class="repair-detail" v-if="currentRepair">
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="报修编号">{{ currentRepair.repairNo }}</el-descriptions-item>
          <el-descriptions-item label="报修人">{{ currentRepair.applicant }}</el-descriptions-item>
          <el-descriptions-item label="报修类型">{{ currentRepair.repairType }}</el-descriptions-item>
          <el-descriptions-item label="维修类别">{{ currentRepair.repairCategory }}</el-descriptions-item>
          <el-descriptions-item label="预估费用">{{ currentRepair.estimatedCost }}元</el-descriptions-item>
          <el-descriptions-item label="维修人员">{{ currentRepair.repairStaff }}</el-descriptions-item>
        </el-descriptions>

        <div class="detail-section">
          <h4>维修记录</h4>
          <el-timeline>
            <el-timeline-item
              v-for="(record, index) in currentRepair.repairInfo.records"
              :key="index"
              :timestamp="record.time">
              {{ record.content }}
              <p v-if="record.remark" class="repair-remark">备注：{{ record.remark }}</p>
            </el-timeline-item>
          </el-timeline>
        </div>

        <div class="detail-section" v-if="currentRepair.parts">
          <h4>更换配件</h4>
          <el-table :data="currentRepair.parts" border style="width: 100%">
            <el-table-column prop="name" label="配件名称" width="180"></el-table-column>
            <el-table-column prop="quantity" label="数量" width="120"></el-table-column>
            <el-table-column prop="price" label="单价" width="120">
              <template slot-scope="scope">
                {{ scope.row.price }}元
              </template>
            </el-table-column>
            <el-table-column prop="total" label="小计">
              <template slot-scope="scope">
                {{ scope.row.quantity * scope.row.price }}元
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="detail-section" v-if="currentRepair.settlement">
          <h4>结算信息</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="结算单号">{{ currentRepair.settlement.settlementNo }}</el-descriptions-item>
            <el-descriptions-item label="结算时间">{{ currentRepair.settlement.settlementTime }}</el-descriptions-item>
            <el-descriptions-item label="实际费用">{{ currentRepair.settlement.actualCost }}元</el-descriptions-item>
            <el-descriptions-item label="结算人">{{ currentRepair.settlement.operator }}</el-descriptions-item>
          </el-descriptions>
          <p v-if="currentRepair.settlement.remarks" class="settlement-remarks">
            备注：{{ currentRepair.settlement.remarks }}
          </p>
        </div>
      </div>
    </el-dialog>

    <!-- 结算对话框 -->
    <el-dialog title="费用结算" :visible.sync="settlementDialogVisible" width="40%">
      <el-form :model="settlementForm" label-width="100px">
        <el-form-item label="结算单号">
          <el-input v-model="settlementForm.settlementNo" disabled></el-input>
        </el-form-item>

        <el-form-item label="维修费用">
          <el-input-number v-model="settlementForm.laborCost" :min="0" placeholder="维修工时费"></el-input-number>
          <span class="unit">元</span>
        </el-form-item>

        <el-form-item label="配件费用">
          <el-input-number v-model="settlementForm.partsCost" :min="0" placeholder="配件总费用"></el-input-number>
          <span class="unit">元</span>
        </el-form-item>

        <el-form-item label="其他费用">
          <el-input-number v-model="settlementForm.otherCost" :min="0" placeholder="其他费用"></el-input-number>
          <span class="unit">元</span>
        </el-form-item>

        <el-form-item label="合计金额">
          <span class="total-amount">{{ totalAmount }}元</span>
          <span class="estimate-info" :class="{ 'over-estimate': isOverEstimate }">
            (预估: {{ currentRepair ? currentRepair.estimatedCost : 0 }}元)
          </span>
        </el-form-item>

        <el-form-item label="结算备注">
          <el-input type="textarea" v-model="settlementForm.remarks" rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="settlementDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitSettlement">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'pending',
      pendingList: [
        {
          repairNo: 'BX202403001',
          applicant: '张三',
          repairType: '水电维修',
          repairCategory: '有偿维修',
          estimatedCost: 200,
          repairStaff: '李师傅',
          repairInfo: {
            records: [
              {
                time: '2024-03-20 14:00:00',
                content: '开始维修',
                remark: '检查故障点'
              },
              {
                time: '2024-03-20 15:30:00',
                content: '完成维修',
                remark: '更换水管并测试'
              }
            ]
          },
          parts: [
            { name: '水管', quantity: 2, price: 50 }
          ]
        }
      ],
      completedList: [
        {
          repairNo: 'BX202403002',
          applicant: '李四',
          settlementNo: 'JS202403001',
          actualCost: 300,
          settlementTime: '2024-03-15 17:30:00',
          settlement: {
            settlementNo: 'JS202403001',
            settlementTime: '2024-03-15 17:30:00',
            actualCost: 300,
            operator: '王会计',
            remarks: '包含维修工时费和配件费用'
          }
        }
      ],
      detailDialogVisible: false,
      settlementDialogVisible: false,
      currentRepair: null,
      settlementForm: {
        settlementNo: '',
        laborCost: 0,
        partsCost: 0,
        otherCost: 0,
        remarks: ''
      }
    }
  },
  computed: {
    totalAmount() {
      return this.settlementForm.laborCost + this.settlementForm.partsCost + this.settlementForm.otherCost
    },
    isOverEstimate() {
      return this.currentRepair && this.totalAmount > this.currentRepair.estimatedCost
    }
  },
  methods: {
    generateSettlementNo() {
      const date = new Date()
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const random = String(Math.floor(Math.random() * 1000)).padStart(3, '0')
      return `JS${year}${month}${day}${random}`
    },
    viewDetail(row) {
      this.currentRepair = row
      this.detailDialogVisible = true
    },
    handleSettlement(row) {
      this.currentRepair = row
      this.settlementForm = {
        settlementNo: this.generateSettlementNo(),
        laborCost: 0,
        partsCost: 0,
        otherCost: 0,
        remarks: ''
      }
      this.settlementDialogVisible = true
    },
    submitSettlement() {
      if (this.totalAmount <= 0) {
        this.$message.error('请填写费用金额')
        return
      }

      // TODO: 提交结算信息到后端
      const settlement = {
        settlementNo: this.settlementForm.settlementNo,
        settlementTime: new Date().toLocaleString(),
        actualCost: this.totalAmount,
        operator: '当前用户',
        remarks: this.settlementForm.remarks
      }

      this.currentRepair.settlement = settlement
      this.currentRepair.settlementNo = settlement.settlementNo
      this.currentRepair.actualCost = settlement.actualCost
      this.currentRepair.settlementTime = settlement.settlementTime

      // 从待结算列表移动到已结算列表
      const index = this.pendingList.findIndex(item => item.repairNo === this.currentRepair.repairNo)
      if (index > -1) {
        this.pendingList.splice(index, 1)
        this.completedList.unshift(this.currentRepair)
      }

      this.$message.success('结算提交成功')
      this.settlementDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.expense-settlement {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .detail-section {
    margin-top: 20px;

    h4 {
      margin: 0 0 10px;
      color: #303133;
    }

    p {
      margin: 0;
      color: #606266;
      line-height: 1.6;
    }

    .repair-remark {
      margin: 5px 0 0;
      font-size: 13px;
      color: #909399;
    }

    .settlement-remarks {
      margin-top: 10px;
      font-style: italic;
    }
  }

  .unit {
    margin-left: 10px;
    color: #606266;
  }

  .total-amount {
    font-size: 18px;
    font-weight: bold;
    color: #409EFF;
  }

  .estimate-info {
    margin-left: 10px;
    color: #909399;

    &.over-estimate {
      color: #F56C6C;
    }
  }
}
</style> 